
<!--<template>-->
<!--  <div class="msg">-->
<!--    <el-row>-->
<!--      <el-col :span="12">-->
<!--        <el-card class="box-card" shadow="always">-->
<!--          <div class="card-header"><el-avatar :size="80" :src="pathUrl+'/getImage?path='+imageUrl" class="profile-img"/></div>-->
<!--          <div  class="clearfix">-->
<!--            <strong style="float: left; height: 10px; width: 80px;">基本资料</strong>-->
<!--          </div>-->
<!--          <el-divider></el-divider>-->
<!--          <div class="text item">-->
<!--            <el-row>-->
<!--              <el-col :span="4" >姓名:</el-col>-->
<!--              <el-col :span="4">{{realName}}</el-col>-->
<!--            </el-row>-->
<!--            <el-row>-->
<!--              <el-col :span="4" >头像:</el-col>-->
<!--              <el-col :span="16">-->
<!--                <div style="max-height: 100px;max-width: 100%">-->
<!--                <UploadImage></UploadImage>-->
<!--                </div>-->
<!--              </el-col>-->
<!--            </el-row>-->
<!--            <el-row>-->
<!--              <el-col :span="4" >用户名:</el-col>-->
<!--              <el-col :span="4">{{username}}</el-col>-->
<!--            </el-row>-->
<!--            <el-row>-->
<!--              <el-col :span="4" >身份证号:</el-col>-->
<!--              <el-col :span="4">{{idNumber}}</el-col>-->
<!--            </el-row>-->
<!--            <el-row>-->
<!--              <el-button  @click="centerDialogVisible0=true" style="height: 30px; width: 40px; position: absolute; left: 35px" type="text"  class="btn">修改资料</el-button>-->
<!--              <el-button @click="centerDialogVisible1=true" style="height: 30px; width: 40px; position: absolute; left: 330px" type="text" class="btn">修改密码</el-button>-->
<!--            </el-row>-->
<!--          </div>-->
<!--        </el-card>-->
<!--      </el-col>-->
<!--    </el-row>-->
<!--  </div>-->
<!--&lt;!&ndash;  修改资料弹窗&ndash;&gt;-->
<!--  <client-only>-->
<!--    <el-dialog v-model="centerDialogVisible0" title="密码修改" width="40%" center>-->
<!--    <div style="border:  #dedfe0">-->
<!--      <el-divider />-->
<!--    <span>-->
<!--      <el-row>-->
<!--        <el-col :span="4">姓名</el-col>-->
<!--        <el-col :span="20"> <input class="newpassword" style="height: 25px" v-model="realName" type="text" :placeholder="realName"/></el-col>-->
<!--      </el-row>-->
<!--      <el-divider />-->
<!--      <el-row>-->
<!--        <el-col :span="4">身份证号</el-col>-->
<!--        <el-col :span="20"> <input class="newpassword" style="height: 25px" v-model="idNumber" type="text" :placeholder="idNumber"/></el-col>-->
<!--      </el-row>-->
<!--      <el-divider />-->
<!--    </span>-->
<!--      </div>-->
<!--    <template #footer>-->
<!--      <span class="dialog-footer">-->
<!--&lt;!&ndash;        <el-button @click="centerDialogVisible = false">C</el-button>&ndash;&gt;-->
<!--        <el-button type="primary" @click="saveHandle" style="min-width: 80px" >-->
<!--          保存-->
<!--        </el-button>-->
<!--      </span>-->
<!--    </template>-->
<!--  </el-dialog>-->
<!--  </client-only>-->
<!--  &lt;!&ndash;          修改密码弹窗&ndash;&gt;-->
<!--  <client-only><el-dialog v-model="centerDialogVisible1" title="密码修改" width="40%" center>-->
<!--    <span>-->
<!--      <el-row>-->
<!--        <el-col :span="4">原密码</el-col>-->
<!--        <el-col :span="20"> <input class="newpassword" style="height: 25px" v-model="oldPassword" type="password" placeholder="请输入原密码" show-password/></el-col>-->
<!--      </el-row>-->
<!--      <el-divider />-->
<!--      <el-row>-->
<!--        <el-col :span="4">新密码</el-col>-->
<!--        <el-col :span="20"> <input class="newpassword" style="height: 25px" v-model="newPassword" type="password" placeholder="请输入新密码"/></el-col>-->
<!--      </el-row>-->
<!--      <el-divider />-->
<!--      <el-row>-->
<!--        <el-col :span="4">确认密码</el-col>-->
<!--        <el-col :span="20"> <input class="newpassword" style="height: 25px" v-model="setPassword" type="password" placeholder="请确认新密码"/></el-col>-->
<!--      </el-row>-->
<!--      <el-divider />-->
<!--    </span>-->
<!--    <template #footer>-->
<!--      <span class="dialog-footer">-->
<!--&lt;!&ndash;        <el-button @click="centerDialogVisible = false">C</el-button>&ndash;&gt;-->
<!--         <el-button type="primary" @click="reset" style="min-width: 80px" >重置</el-button>-->
<!--        <el-button type="primary" @click="submit" style="min-width: 80px" >-->
<!--          确定-->
<!--        </el-button>-->
<!--      </span>-->
<!--    </template>-->
<!--  </el-dialog>-->
<!--  </client-only>-->
<!--</template>-->



<!--<script>-->
<!--import pathUrl from "@/main";-->
<!--import axios from "axios"-->
<!--import UploadImage from "@/router/driver/personal/uploadImage";-->
<!--import {ElMessage} from "element-plus";-->

<!--export default {-->
<!--  components: {UploadImage},-->
<!--  mounted() {-->
<!--        let userjson=sessionStorage.getItem('user')-->
<!--        let user=JSON.parse(userjson)-->
<!--        this.username=user.username-->
<!--        this.realName=user.realName-->
<!--        this.idNumber=user.idCard-->
<!--        this.imageUrl=user.image-->
<!--  },-->
<!--  data() {-->
<!--    return {-->
<!--      pathUrl,-->
<!--      username:'123',-->
<!--      imageUrl:'',-->
<!--      idNumber:'231343652424342432',-->
<!--      realName:'神里',-->
<!--      oldPassword:'',-->
<!--      newPassword:'',-->
<!--      setPassword:'',-->
<!--      centerDialogVisible0:false,-->
<!--      centerDialogVisible1:false,-->
<!--      //添加表单的验证规则对象-->
<!--      addUserFormRules: {-->
<!--        password: [{required:true,message:'请输入原密码',trigger:'blur'},-->
<!--          {min:2,max:10,message:'密码长度在3~10个字符',trigger:'blur'}],-->
<!--        username: [{required:true,message:'请输入手机号',trigger:'blur'},-->
<!--          {min:11,max:11,message:'请输入11位手机号',trigger:'blur'}],-->
<!--      },-->
<!--    };-->
<!--  },-->
<!--  methods: {-->
<!--    reset:function (){-->
<!--      this.setPassword=''-->
<!--      this.newPassword=''-->
<!--      this.oldPassword=''-->
<!--    },-->
<!--    submit: function (){-->
<!--      let userjson=sessionStorage.getItem('user')-->
<!--      let user=JSON.parse(userjson)-->
<!--      axios({-->
<!--        method: 'post',-->
<!--        url: '/api/login/changePassword',-->
<!--        params:{-->
<!--          username:user.username-->
<!--        },-->
<!--        data: {-->
<!--          oldPassword:this.oldPassword,-->
<!--          newPassword:this.newPassword,-->
<!--          setPassword:this.setPassword-->
<!--        },-->
<!--      })-->
<!--          .then((res)=>{-->
<!--            if(res.data.success===false){-->
<!--              ElMessage.error(res.data.errorMsg)-->
<!--              this.centerDialogVisible1 = false-->
<!--              this.oldPassword=''-->
<!--                  this.newPassword=''-->
<!--                  this.setPassword=''-->
<!--            }-->
<!--            else{-->
<!--              ElMessage.success("密码修改成功")-->
<!--              this.centerDialogVisible1 = false-->
<!--                  this.oldPassword=''-->
<!--                  this.newPassword=''-->
<!--                  this.setPassword=''-->
<!--              sessionStorage.clear()-->
<!--              this.$router.push('/login')-->
<!--            }-->
<!--          });-->
<!--    },-->
<!--    handleAvatarSuccess(res, file) {-->
<!--      this.imageUrl = URL.createObjectURL(file.raw);-->
<!--    },-->
<!--    beforeAvatarUpload(file) {-->
<!--      const isJPG = file.type === 'image/jpeg';-->
<!--      const isLt2M = file.size / 1024 / 1024 < 2;-->

<!--      if (!isJPG) {-->
<!--        this.$message.error('上传头像图片只能是 JPG 格式!');-->
<!--      }-->
<!--      if (!isLt2M) {-->
<!--        this.$message.error('上传头像图片大小不能超过 2MB!');-->
<!--      }-->
<!--      return isJPG && isLt2M;-->
<!--    },-->
<!--    saveHandle: function (){-->
<!--      if(this.idNumber===''||this.realName===''){-->
<!--        ElMessage.error('个人信息不能为空')-->
<!--      }else if(!/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(this.idNumber)){-->
<!--        ElMessage.error('身份证号输入有误')-->
<!--      }-->
<!--      else{-->
<!--        axios({-->
<!--          method: 'post',-->
<!--          url: '/api/login/changeUserInfo',-->
<!--          data: {-->
<!--            username:this.username,-->
<!--            idCard:this.idNumber,-->
<!--            realName:this.realName-->
<!--          },-->
<!--        })-->
<!--            .then((res)=>{-->
<!--              if(res.data.success===true){-->
<!--                ElMessage.success("修改成功")-->
<!--                let userjson=sessionStorage.getItem('user')-->
<!--                let user=JSON.parse(userjson)-->
<!--                user.username=this.username-->
<!--                user.realName=this.realName-->
<!--                user.idCard=this.idNumber-->
<!--                this.centerDialogVisible0 = false-->
<!--                sessionStorage.setItem('user',JSON.stringify(user))-->
<!--                location. reload()-->

<!--                this.$router.push('/auditor')-->
<!--              }else if(res.data.success===false){-->
<!--                ElMessage.error(res.data.errorMsg)-->
<!--              }-->
<!--            });-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->
<!--<script  setup>-->
<!--// import uploadImage from "@/router/driver/personal/uploadImage";-->
<!--// import { ref } from 'vue'-->
<!--// const value1 = ref('')-->
<!--// const radio=ref(1)-->
<!--</script>-->
<!--<style scoped>-->
<!--*{-->
<!--  margin: 10px;-->
<!--  padding: 0;-->
<!--}-->
<!--.btn {-->
<!--  font-size: larger;-->
<!--}-->
<!--.msg {-->
<!--  height: 100%;-->
<!--}-->
<!--.box-card {-->
<!--  margin-top: 50px;-->
<!--  padding-top: 0;-->
<!--  position: absolute;-->
<!--  left: 30%;-->
<!--  width: 500px;-->
<!--  height: 550px;-->
<!--  text-align: center;-->
<!--  display: inline-block;-->
<!--  vertical-align: middle;-->
<!--}-->
<!--.box-card .card-header {-->
<!--  position: relative;-->
<!--  height: 100px;-->
<!--}-->

<!--.box-card .card-header .profile-img {-->
<!--  width: 100px;-->
<!--  height: 100px;-->
<!--  border-radius: 1000px;-->
<!--  position: absolute;-->
<!--  top:35%;-->
<!--  left: 50%;-->
<!--  transform: translate(-50%, -50%);-->
<!--  border: 8px solid #c74385;-->
<!--  box-shadow: 0 0 20px #00000033;-->
<!--}-->

<!--.box-card .card-header .profile-img:hover {-->
<!--  width: 150px;-->
<!--  height: 150px;-->
<!--  border: 8px solid #d885af;-->
<!--}-->
<!--/*清除浮动*/-->
<!--.clearfix:before,-->
<!--.clearfix:after {-->
<!--  display: table;-->
<!--  content: "";-->
<!--}-->
<!--.clearfix:after {-->
<!--  clear: both-->
<!--}-->
<!--.Box1{-->
<!--  width:100%;-->
<!--  height: 100%;-->
<!--  background: #f4f4f5;-->
<!--  position: absolute;-->
<!--  /*left: 20%;*/-->
<!--}-->
<!--.personalMsg{-->
<!--  left: 30%;-->
<!--  top:5%;-->
<!--  position: absolute;-->
<!--  background: white;-->
<!--  padding: 20px;-->
<!--  width: 400px;-->
<!--  /*height: 100%;*/-->
<!--  border-top:5px solid  #dedfe0;-->
<!--  /*box-sizing: border-box;*/-->
<!--}-->
<!--.personalMsg .el-row{-->
<!--  margin-bottom: 20px;-->
<!--  margin-top: 20px;-->
<!--}-->
<!--.personalMsg .butt1{-->
<!--  margin-top: 20px;-->
<!--}-->
<!--/* 这是用户上传头像 */-->
<!--.head .head-icon .avatar-uploader .el-upload {-->
<!--  border: 1px dashed #d9d9d9;-->
<!--  border-radius: 6px;-->
<!--  cursor: pointer;-->
<!--  position: relative;-->
<!--  overflow: hidden;-->
<!--}-->
<!--.head .head-icon .avatar-uploader .el-upload:hover {-->
<!--  border-color: #409EFF;-->
<!--}-->
<!--.head .head-icon  .avatar-uploader-icon {-->
<!--  font-size: 28px;-->
<!--  color: #8c939d;-->
<!--  width: 78px;-->
<!--  height: 78px;-->
<!--  line-height: 78px;-->
<!--  text-align: center;-->
<!--  /* background-color: aliceblue;  */-->
<!--}-->
<!--.head .head-icon .avatar {-->
<!--  width: 78px;-->
<!--  height: 78px;-->
<!--  display: block;-->
<!--}-->

<!--</style>-->

<template>
  <div class="msg">
    <el-row>
      <el-col :span="12">
        <el-card class="box-card" shadow="always">
          <div class="card-header"><el-avatar :size="80" :src="pathUrl+'/getImage?path='+imageUrl" alt="Profile Image" class="profile-img"/></div>
          <div  class="clearfix">
            <strong style="float: left; height: 10px; width: 80px;">基本资料</strong>
          </div>
          <el-divider></el-divider>
          <div class="text item">
            <el-row>
              <el-col :span="4">姓名:</el-col>
              <el-col :span="4">{{realName}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="4">头像:</el-col>
              <el-col :span="16">
                <div style="max-height: 100px;max-width: 100%">
                  <uploadImage></uploadImage>
                </div>

              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4">用户名:</el-col>
              <el-col :span="4">{{username}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="4">身份证号:</el-col>
              <el-col :span="4">{{idNumber}}</el-col>
            </el-row>
            <el-row>
              <el-button  @click="centerDialogVisible0=true" style="height: 30px; width: 40px; position: absolute; left: 35px" type="text"  class="btn">修改资料</el-button>
              <el-button @click="centerDialogVisible1=true" style="height: 30px; width: 40px; position: absolute; left: 330px" type="text" class="btn">修改密码</el-button>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
  <!--  修改资料弹窗-->
  <el-dialog v-model="centerDialogVisible0" title="修改资料" width="40%" center>
    <div style="border:  #dedfe0">
      <el-divider />
      <span>
      <el-row>
        <el-col :span="4">姓名</el-col>
        <el-col :span="20"> <input class="newpassword" style="height: 25px" v-model="realName" type="text" :placeholder="realName"/></el-col>
      </el-row>
      <el-divider />
      <el-row>
        <el-col :span="4">身份证号</el-col>
        <el-col :span="20"> <input class="newpassword" style="height: 25px" v-model="idNumber" type="text" :placeholder="idNumber"/></el-col>
      </el-row>
      <el-divider />
    </span>
    </div>
    <template #footer>
      <span class="dialog-footer">
<!--        <el-button @click="centerDialogVisible = false">C</el-button>-->
        <el-button type="primary" @click="saveHandle" style="min-width: 80px" >
          保存
        </el-button>
      </span>
    </template>
  </el-dialog>
  <!--          修改密码弹窗-->
  <el-dialog v-model="centerDialogVisible1" title="密码修改" width="40%" center>
    <span>
      <el-row>
        <el-col :span="4">原密码</el-col>
        <el-col :span="20"> <input class="newpassword" style="height: 25px" v-model="oldPassword" type="password" placeholder="请输入原密码" show-password/></el-col>
      </el-row>
      <el-divider />
      <el-row>
        <el-col :span="4">新密码</el-col>
        <el-col :span="20"> <input class="newpassword" style="height: 25px" v-model="newPassword" type="password" placeholder="请输入新密码"/></el-col>
      </el-row>
      <el-divider />
      <el-row>
        <el-col :span="4">确认密码</el-col>
        <el-col :span="20"> <input class="newpassword" style="height: 25px" v-model="setPassword" type="password" placeholder="请确认新密码"/></el-col>
      </el-row>
      <el-divider />
    </span>
    <template #footer>
      <span class="dialog-footer">
<!--        <el-button @click="centerDialogVisible = false">C</el-button>-->
         <el-button type="primary" @click="reset" style="min-width: 80px" >重置</el-button>
        <el-button type="primary" @click="submit" style="min-width: 80px" >
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>



<script>
import pathUrl from "@/main";
import axios from "axios"
import uploadImage from "@/router/driver/personal/uploadImage";
import {ElMessage} from "element-plus";
export default {
  components: {uploadImage},
  mounted() {
    let userjson=sessionStorage.getItem('user')
    let user=JSON.parse(userjson)
    this.username=user.username
    this.realName=user.realName
    this.idNumber=user.idCard
    this.imageUrl=user.image
  },
  data() {
    return {
      pathUrl,
      username:'',
      imageUrl:'',
      idNumber:'',
      realName:'',
      oldPassword:'',
      newPassword:'',
      setPassword:'',
      centerDialogVisible0:false,
      centerDialogVisible1:false,
      //添加表单的验证规则对象
      addUserFormRules: {
        password: [{required:true,message:'请输入原密码',trigger:'blur'},
          {min:2,max:10,message:'密码长度在3~10个字符',trigger:'blur'}],
        username: [{required:true,message:'请输入手机号',trigger:'blur'},
          {min:11,max:11,message:'请输入11位手机号',trigger:'blur'}],
      },
    };
  },
  methods: {

    reset:function (){
      this.setPassword=''
      this.newPassword=''
      this.oldPassword=''
    },
    submit: function (){
      let userjson=sessionStorage.getItem('user')
      let user=JSON.parse(userjson)
      axios({
        method: 'post',
        url: '/api/login/changePassword',
        params:{
          username:user.username
        },
        data: {
          oldPassword:this.oldPassword,
          newPassword:this.newPassword,
          setPassword:this.setPassword
        },
      })
      .then((res)=>{
        if(res.data.success===false){
          ElMessage.error(res.data.errorMsg)
          this.centerDialogVisible1 = false
          this.oldPassword='',
              this.newPassword='',
              this.setPassword=''
        }
        else{
          ElMessage.success("密码修改成功")
          this.centerDialogVisible1 = false,
              this.oldPassword='',
              this.newPassword='',
              this.setPassword=''
          sessionStorage.clear()
          this.$router.push('/login')
        }
      });
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    saveHandle: function (){
      if(this.idNumber===''||this.realName===''){
        alert('个人信息不能为空')
      }else if(!/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(this.idNumber)){
        alert('身份证号输入有误')
      }
      else{
        axios({
          method: 'post',
          url: '/api/login/changeUserInfo',
          data: {
            username:this.username,
            idCard:this.idNumber,
            realName:this.realName
          },
        })
        .then((res)=>{
          if(res.data.success===true){
            ElMessage.success("修改成功")
            let userjson=sessionStorage.getItem('user')
            let user=JSON.parse(userjson)
            user.username=this.username
            user.realName=this.realName
            user.idCard=this.idNumber
            this.centerDialogVisible0 = false
            sessionStorage.setItem('user',JSON.stringify(user))
          }else if(res.data.success===false){
            ElMessage.error(res.data.errorMsg)
          }
        });
      }
    }
  }
}
</script>

<style scoped>
*{
  margin: 10px;
  padding: 0;
}
.btn {
  font-size: larger;
}
.msg {
  height: 100%;
}
.box-card {
  margin-top: 50px;
  padding-top: 0;
  position: absolute;
  left: 30%;
  width: 500px;
  height: 550px;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
}
.box-card .card-header {
  position: relative;
  height: 100px;
}

.box-card .card-header .profile-img {
  width: 100px;
  height: 100px;
  border-radius: 1000px;
  position: absolute;
  top:35%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 8px solid #c74385;
  box-shadow: 0 0 20px #00000033;
}

.box-card .card-header .profile-img:hover {
  width: 150px;
  height: 150px;
  border: 8px solid #d885af;
}
/*清除浮动*/
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.Box1{
  width:100%;
  height: 100%;
  background: #f4f4f5;
  position: absolute;
  /*left: 20%;*/
}
.personalMsg{
  left: 30%;
  top:5%;
  position: absolute;
  background: white;
  padding: 20px;
  width: 400px;
  /*height: 100%;*/
  border-top:5px solid  #dedfe0;
  /*box-sizing: border-box;*/
}
.personalMsg .el-row{
  margin-bottom: 20px;
  margin-top: 20px;
}
.personalMsg .butt1{
  margin-top: 20px;
}
/* 这是用户上传头像 */
.head .head-icon .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.head .head-icon .avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.head .head-icon  .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 78px;
  height: 78px;
  line-height: 78px;
  text-align: center;
  /* background-color: aliceblue;  */
}
.head .head-icon .avatar {
  width: 78px;
  height: 78px;
  display: block;
}

</style>
